<template>
  <div class="mod-prod-info">
    <el-table :data="value" border>
      <el-table-column type="index" label="序号" align="center" show-overflow-tooltip></el-table-column>

      <el-table-column prop="bname" label="楼栋名称" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.name" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="totalsets" label="套数" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.password" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="presalesets" label="预售套数" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.presalesets" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="saledsets" label="可售套数" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.saledsets" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="layers" label="层高" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.layers" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.state" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="biz" label="备注" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.biz" @change="handleEdit(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100" header-align="right">
        <template slot-scope="scope">
          <div style="display: flex;justify-content: space-between;">
            <el-link icon="el-icon-plus" size="mini" type="primary"
                     @click="handleAdd(scope.$index, scope.row)" :underline="false"
                     style="font-size: 14px;margin-left: 40px"></el-link>
            <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
                     type="danger" :underline="false"></el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        // 数据库中的规格
        dbSpecs: [],
        // 根据选定的规格所查询出来的规格值
        dbSpecValues: [],
        specs: [], // 使用的规格
        initing: false
      }
    },
    components: {
    },
    props: {
      value: {
        default: [],
        type: Array
      },
      prodName: {
        default: ''
      },
      pid: {
        default: ''
      }
    },
    watch: {
    },
    // activated: function () {
    //   this.$emit('input', [Object.assign({}, this.defalutSku)])
    // },
    created: function () {
    },
    computed: {
    },
    methods: {
      handleAdd(index, row) {
        this.value.push({
          bname: '',
          totalsets: '',
          layers: '',
          state:'',
          biz:''
        })
      },
      handleDelete(index, row) {
        if (index > 0) {
          this.value.splice(index, 1)
        }
      },
      tableRowClassName({ row, rowIndex }) {
        if ((rowIndex+1)%2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
        return ''
      }
    }
  }
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
